<template>
  <div class="app">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="题干">
        <el-input type="textarea" v-model="form.questionTxt" autosize></el-input>
      </el-form-item>
      <el-form-item label="参考答案">
        <editor id="tinymce" v-model="form.tinyValue" :init="init"></editor>
      </el-form-item>
      <el-form-item label="分值">
      <el-input-number v-model="form.num"  :min="1" :max="50" ></el-input-number>
       </el-form-item>
       <el-form-item >
       <el-button size="small" round  @click="resetForm('form')">重置</el-button>
       <el-button size="small" type="primary" round icon="el-icon-document-checked"  @click="submitForm()">新增题目</el-button>
       </el-form-item>
    </el-form>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";//引入tinymce富文本插件
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/fullscreen"; //全屏插件
import "tinymce/plugins/preview"; //预览插件
import "tinymce/plugins/code"; //源代码插件
import "tinymce/plugins/wordcount"; //字数插件
import "tinymce/plugins/autoresize"; //高度自适应
import "tinymce/plugins/paste"; // 允许粘贴文本
export default {
  components: {
    Editor
  },
  data() {
    return {
      form: {
        questionTxt: "",
        tinyValue: "",
        num: 5,
      },
      init: {
        language_url: "/tinymce/zh_CN.js", // 语言包的路径
        language: "zh_CN", //语言
        skin_url: "/tinymce/skins/ui/oxide", // skin路径
        height: this.height, //编辑器高度
        branding: false, //是否禁用“Powered by TinyMCE”
        menubar: false, //顶部菜单栏显示
        selector: "textarea",//指定CSS选择器
        plugins: "lists image table wordcount fullscreen preview code wordcount autoresize paste",//插件
        autoresize_bottom_margin: 50, // 编辑器的底部外边距
        autoresize_max_height: 800, // 编辑区域的最大高
        autoresize_min_height: 350, // 编辑区域的最小高
        autoresize_on_init: true,//自适应高度
        paste_as_text: true, // 允许粘贴文本
        toolbar: //工具栏
          "undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table | removeformat | fullscreen | preview | code | wordcount",
        /* blobinfo参数是一个对象,包含上传文件的信息,success为成功函数,上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息 */
        images_upload_handler: (blobInfo, success, failure) => { //上传图片
          this.modifyingHead(blobInfo, success, failure);
        }
      }
    };
  },
  methods: {
     //上传图片
    modifyingHead(blobInfo, success, failure) {
      let that = this;
      let formdata = new FormData();
      formdata.set("upload_file", blobInfo.blob());
      // 请求接口
      that.axios.post("/api/Question/UploadImg", formdata)
        .then(res => {
          success(res.data.location);
        })
        .catch(error => {
          failure(error)
        });
    },
    // 提交
    submitForm(){
      if(this.form.questionTxt && this.form.tinyValue){
        this.$message.success("数据是"+this.form.questionTxt);
      }else{
        this.$message.warning("请填写完整信息");
      }
    },
    // 重置
     resetForm(form) {
       console.log(form,111)
        this.$refs[form].resetFields();
      }
  },
  mounted() {
    tinymce.init({});
  }
};
</script>

<style scoped lang="less">
/deep/.el-form-item {
  margin-bottom: 14px;
}

</style>
